<template>
  <div class="articles-area">
    <!-- 返回顶部  记得把这个组件放在最外层的div里的第一个位置，不要放在尾部！-->
    <el-backtop></el-backtop>
    <el-card style="text-align: left;width: 990px;margin: 35px auto 0 auto">
      <!-- 返回上一页 -->
      <el-page-header style="color: red;" @back="goBack" content="详情"></el-page-header>
      <!-- 文章内容 -->
      <div style="margin-top: 14px;">
        <span style="font-size: 20px"><strong> {{article.articleTitle}}</strong></span>
        <el-divider content-position="left">{{article.username}} &nbsp  &nbsp  发表于  &nbsp {{article.createTime}}</el-divider>
        <div class="markdown-body">
          <div v-html="article.articleContentHtml"></div>
        </div>
      </div>
    </el-card>
   
  </div>
</template>

<script>
  export default {
    name: 'ArticleDetails',
    data () {
      return {
        article: []
      }
    },
    mounted () {
      this.loadArticle()
    },
    methods: {
      loadArticle () {
        var _this = this
        this.$axios.get('/article/' + this.$route.query.id).then(resp => {
          if (resp && resp.data.code === 200) {
            _this.article = resp.data.result
          }
        })
      },
      goBack() {
        this.$router.push({ path: '/jotter' })   // 这个是前往文章页面
        // window.history.go(-1)  // 返回是一个页面
      }
    }
  }
</script>

<style scoped>
  @import "../../styles/markdown.css";
</style>
